<template>
  <div class="app-container">
    <div class="content-content">
      <el-row>
        <h1><span style="color:#0776e6;">{{rowName}}</span>分配资源</h1>
      </el-row>
      <el-row
        style="text-align: center; display: flex; justify-content: center"
      >
        <el-col :span="8">
          <div style="font-size: 17px; font-weight: bold; margin-bottom: 15px">
            已有资源
          </div>
          <el-table
            border
            ref="roleTable"
            :data="
              roleData.filter(
                (data) =>
                  !search1 ||
                  data.name.toLowerCase().includes(search1.toLowerCase())
              )
            "
            tooltip-effect="dark"
            style="width: 60%; margin: 0 auto"
            @select="RightSelection"
            v-loading="loadRole"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name">
              <template slot="header">
                <el-input
                  v-model="search1"
                  size="mini"
                  placeholder="输入关键字搜索"
                />
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalPage"
            @current-change="changePage2"
            style="margin-top: 15px; text-align: right; margin-right: 20%"
            background
            layout="prev, pager, next"
          ></el-pagination>
        </el-col>
        <el-col :span="8" style="min-height: 700px">
          <div style="font-size: 17px; font-weight: bold; margin-bottom: 15px">
            未分配资源
          </div>
          <el-table
            border
            ref="multipleTable"
            :data="
              notResData.filter(
                (data) =>
                  !search ||
                  data.name.toLowerCase().includes(search.toLowerCase())
              )
            "
            tooltip-effect="dark"
            style="width: 60%; margin: 0 auto"
            @select="handleSelectionChange"
            v-loading="loadNot"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name">
              <template slot="header">
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"
                />
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :page-size="perPage"
            :current-page="page"
            :total="total"
            @current-change="changePage"
            style="margin-top: 15px; text-align: right; margin-right: 20%"
            background
            layout="prev, pager, next"
          ></el-pagination>
        </el-col>
      </el-row>
      <div class="back" @click="back">
        <i class="el-icon-back" style="font-size: 25px"></i>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/request";
export default {
  name: "distribution",
  data() {
    return {
      appKey: "fd5b5aabcf1c75f915241c8e",
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      keyWord: "",
      allResources: [],
      rowId:'',
      roleData: [],
      search: "",
      search1: "",
      isNull: "",
      totalPage: 1, // 总条
      currentPage: 1, //当前页数
      pageSize: 10, // 每页显示数量
      notResData: [],
      loadRole:false,
      loadNot:false,
      rowName:''
    };
  },
  mounted() {
    this.rowId = this.$route.query.id;
    this.rowName = this.$route.query.roleName;
    this.roleResour();
    this.notList();
  },
  methods: {
    //返回
    back() {
      this.$router.push({
        path: "/role/index",
      });
    },
    //全部资源勾选时
    handleSelectionChange(val) {
      this.loadNot=true
      this.loadRole=true
      val.forEach((item) => {
        this.roleDistri(item.id);
        item.check = false;
      });
    },
    // 已有资源勾选时
    RightSelection(val) {
      this.loadRole=true
      this.loadNot=true
      val.forEach((item) => {
        this.roleDelete(item.id);
        // this.$refs.multipleTable.toggleRowSelection(item, false);
        item.check = false;
      }); 
      // this.$forceUpdate();
    },
    //未分配列表
    notList() {
      let params = {
        roleId: this.rowId,
        appKey: this.appKey,
        page: this.page,
        pageSize: this.perPage,
      };
      
      axios({
        url: `api/permission/role/${params.roleId}/not_attached_resource`,
        method: "GET",
        params,
      })
        .then((res) => {
          // console.log(res);
          this.notResData = res.data.data.items;
          this.total = res.data.data.total;
          this.loadNot=false
        })
        .catch((err) => {});
    },
    //已分配
    roleResour() {
      let params = {
        roleId: this.rowId,
        appKey: this.appKey,
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      
      axios({
        url: `api/permission/role/${params.roleId}/resource`,
        method: "GET",
        params,
      })
        .then((res) => {
          // console.log(res);
          if (!res.data.data.items) {
            this.isNull = true;
            // console.log(this.isNull);
          } else {
            this.isNull = false;
          }
          this.roleData = res.data.data.items;
          this.totalPage = res.data.data.total;
          this.loadRole=false
        })
        .catch((err) => {});
    },
    //分配
    roleDistri(resourceId) {
      let data = {
        roleId: this.rowId,
        appKey: this.appKey,
        resourceId: resourceId,
      };
      axios({
        url: `api/permission/role/${data.roleId}/resource/${data.resourceId}?appKey=${data.appKey}`,
        method: "put",
        data,
      })
        .then((res) => {
          if (this.page != 1) {
            if ((this.total - 1) % this.perPage == 0) this.page--;
          }
          this.roleResour();
          // this.$nextTick(() => {
            // this.data.splice(0,this.data.length)
            // this.ResourcesList();
            this.notList();
          // });
          this.$forceUpdate();
          this.$message({
            message: "分配成功",
            type: "success",
            duration:700
          });
        })
        .catch((err) => {});
    },
    //删除
    roleDelete(resouId) {
      let params = {
        roleId: this.rowId,
        appKey: this.appKey,
        resourceId: resouId,
      };
      axios({
        url: `api/permission/role/${params.roleId}/resource/${params.resourceId}`,
        method: "delete",
        params,
      })
        .then((res) => {
          if (this.currentPage!= 1) {
            if ((this.totalPage - 1) % this.pageSize == 0) this.currentPage--;
          }
          this.roleResour();
          // this.$nextTick(() => {
            this.notList();
          // });
          this.$forceUpdate();
          this.$message({
            message: "解除成功",
            // type: "success",
            duration:700
          });
        })
        .catch((err) => {});
    },
    changePage(num) {
      this.page = num;
      this.notList();
    },
    changePage2(num) {
      this.currentPage = num;
      this.roleResour();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-transfer__buttons {
  display: none;
}
/deep/ .el-transfer-panel__list.is-filterable {
  height: 310px;
}
/deep/ .el-transfer-panel__body {
  height: 400px;
}
/deep/ .el-transfer-panel {
  width: 270px;
}
/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox {
  display: none;
}
/deep/ .el-table th > .cell {
  width: 70%;
  // margin-left: 18%;
}
// /deep/ .el-table .cell {
//   text-align: center;
// }
// /deep/ .el-table td, .el-table th.is-leaf {
//   text-align: center;
// }
</style>